<template>
  <div class='container'>
    <el-card>
        <!-- 搜索 -->
        <el-form >
          <div class="filter-container">
            <el-form-item label="关键字">
              <el-input
              v-model="page.keyword"
                style="width: 30%;"
                placeholder="根据编号搜索"
                @keyup.enter.native="search"
              ></el-input>
              <el-button
              class="filter-item fr"
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="clearText"
              >清除</el-button>
              <el-button
              class="filter-item fr"
              size="small"
              style="margin-right: 10px;"
              type="primary"
              icon="el-icon-edit"
              @click="search"
            >搜索</el-button>
            </el-form-item>
          </div>
        </el-form>
         <el-alert
          type="info"
          show-icon>
          数据一共{{this.page.pages}}条
        </el-alert>
        <!-- 表格数据 -->
          <el-table :data="randomsList">
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column  align="center" prop="questionType" label="题型">
              <template slot-scope="{row}">
                <span v-if="row.questionType==1">单选</span>
                <span v-if="row.questionType==2">多选</span>
                <span v-if="row.questionType==3">简答</span>
              </template>
            </el-table-column>
            <el-table-column prop="questionIDs" label="题目编号">
              <template slot-scope="{ row }">
                <div style="color:skyblue;" v-for="(item, index) in row.questionIDs" :key="index">{{item.number}}</div>
               </template>
            </el-table-column>
            <el-table-column prop="addTime" label="录入时间"></el-table-column>
            <el-table-column prop="totalSeconds" label="答题时间(s)"></el-table-column>
            <el-table-column prop="accuracyRate" label="正确率(%)"></el-table-column>
            <el-table-column prop="userName" label="录入人"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{row}">
                <el-button icon="el-icon-delete" type="danger" round plain @click="removeRandoms(row.id)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        <!-- 表格数据 -->
        <!-- 分页组件 -->
        <!-- page-size每页条数
            current-page当前页数
         -->
          <el-pagination
            layout="prev, pager, next"
            :page-size="page.pagesize"
            :current-page="page.page"
            :total="page.pages"
            @current-change="changePage"
            >
          </el-pagination>
          <!-- 分页组件 -->
  </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      randomsList: [], // 列表数据集合
      page: {
        keyword: '', // 搜索的关键字
        page: 1, // 当前页码
        pages: 0, // 总页数
        pagesize: 20 // 每页数量
      }
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.randoms()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () {},
  // 组件方法
  methods: {
    // 获取组题列表数据方法
    async randoms () {
      const { data } = await randoms(this.page)
      this.randomsList = data.items
      this.page.page = parseInt(data.page) // 当前页码
      this.page.pagesize = parseInt(data.pagesize) // 每页条数
      this.page.pages = data.counts // 总数
      console.log(data)
    },
    // 删除方法
    async removeRandoms (id) {
      await this.$confirm('确认删除这条数据吗？')
      await removeRandoms({ id: id })
      this.$message.success('删除成功')
      this.randoms() // 重新拉取数据
    },
    // 修改分页数据
    changePage (newPage) {
      this.page.page = newPage
      this.randoms() // 重新拉取数据
    },
    // 搜索
    search () {
      this.randoms()
    },
    // 清除文本
    clearText () {
      this.page.keyword = ''
      this.randoms()
    }
  }
}
</script>

<style scoped >
.container{
  padding: 10px;
}
</style>
